<template>
  <div style="width: 100%; height: 100%">
    <a-input-search
      v-model:value="searchValue"
      style="width: 100%; margin-bottom: 8px; padding: 10px 10px 0"
      placeholder="搜索"
      @search="searchTree"
    />
    <div style="width: 100%; height: calc(100% - 42px); overflow: auto">
      <div>
        <a-tree
          v-if="isShow"
          v-model:expandedKeys="expandedKeys"
          v-model:selectedKeys="selectedKeys"
          :tree-data="treeData"
          :field-names="{
            title: 'name',
          }"
          @select="select"
        >
          <template #title="{ name }">
            <span v-if="name.includes(searchValue) && searchValue" style="color: #1890ff">{{ name }}</span>
            <span v-else>{{ name }}</span>
          </template>
        </a-tree>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, toRaw, onMounted } from 'vue'
import factory from '../factory'

export default defineComponent({
  props: {
    isTG: { type: Boolean, default: true },
    disablekey: { type: String, default: '' },
  },
  emits: ['treeNodeSelected'],
  setup(props, ctx) {
    const isShow = ref(true)
    const expandedKeys = ref([])
    const selectedKeys = ref([])
    const treeData = ref([{ key: '-1', name: '托管角色', children: [] }])
    if (props.isTG) {
      treeData.value.push({ key: '-2', name: '非托管角色', isLeaf: true })
    }
    const getFirstTree = (search = '', node = null) => {
      isShow.value = false
      factory.searchTree(search).then((res) => {
        res.data.forEach((m) => {
          m.title = m.name
        })
        treeData.value[0].children = res.data
        if (!props.isTG) {
          findDisable(res.data)
        }
        if (search) {
          expandedKeys.value = []
          openAll(treeData.value)
        } else {
          expandedKeys.value = ['-1']
        }
        selectedKeys.value = ['-1']
        isShow.value = true
        if (node) {
          expandedKeys.value = [node.key]
        }
      })
    }
    getFirstTree()

    //展开所有带叶子的节点
    const openAll = (node) => {
      node.forEach((m) => {
        if (m.children) {
          expandedKeys.value.push(m.key)
          openAll(m.children)
        }
      })
    }
    //展开所有带叶子的节点
    const findDisable = (node) => {
      node.forEach((m) => {
        if (m.key === props.disablekey) {
          m.disabled = true
        }
        if (m.children) {
          findDisable(m.children)
        }
      })
    }

    //==选中节点======================
    let currentNode = treeData.value[0]
    const select = (selectedKeys, e) => {
      currentNode = e.node
      !currentNode.dataRef && (currentNode.dataRef = toRaw(currentNode))
      ctx.emit('treeNodeSelected', e.node)
    }
    //==父组件ref调用===========
    const reNewNode = (node) => {
      getFirstTree('', node)
    }
    //==搜索树=====
    const searchValue = ref('')
    const searchTree = () => {
      getFirstTree(searchValue.value)
    }

    return {
      expandedKeys,
      selectedKeys,
      treeData,
      select,
      reNewNode,
      searchValue,
      searchTree,
      isShow,
    }
  },
})
</script>
